<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=SVG, initial-scale=1.0">
    <title>SVG 重要概念练习</title>
</head>

<body>
    <header>
        <h1>SVG 重要概念练习</h1>
    </header>
    <main>
        <section>
            <h2>引用SVG的三种方式</h2>
            <p><iframe src="https://svgsilh.com/svg_v2/639149.svg" frameborder="0" width="200px"></iframe>
                <img src="https://svgsilh.com/svg_v2/639149.svg" alt="" width="200px">
                <svg version="1.1" xmlns="http://www.w3.org/2000/svg">
                    <rect width="200" height="200" fill="#ccc" />
                </svg>
            </p>
        </section>
        <section>
            <h2>重要概念</h2>
            <p>
                坐标系及用户坐标体系
                <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="200" height="200"
                    style="background-color: chocolate;" viewbox="0,0 50,50">
                    <rect width="50" height="50" x="10" y="10" fill="#ccc" />
                </svg>
            </p>
        </section>
        <section>
            <h2>形状</h2>
            <p>
                <svg version="1.1" xmlns="http://www.w3.org/2000/svg">
                    <line x1="0" y1="0" x2="200" y2="200" stroke="#ccc" stroke-width="1" />
                </svg>
                <svg height="200" width="200">
                    <polygon points="100,10 200,190 100,200" style="fill:#ccc;stroke:black;stroke-width:1"></polygon>
                </svg>
            </p>
        </section>
        <section>
            <h2>文字</h2>
            <p>
                <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
                    <text x="10" y="20" style="fill:black;">多行文字:
                        <tspan x="10" y="45">第一行</tspan>
                        <tspan x="10" y="70">第二行</tspan>
                    </text>
                </svg>
                <svg version="1.1" xmlns="http://www.w3.org/2000/svg">
                    <defs>
                        <path id="path1" d="M75,20 a1,1 0 0,0 100,0" />
                    </defs>
                    <text x="10" y="100" style="fill:black;">
                        <textPath xlink:href="#path1">I love SVG I love SVG</textPath>
                    </text>
                </svg>
            </p>
        </section>
    </main>
    <footer></footer>
</body>

</html>
